<template>
    <span>
        <el-button v-if="!loading" @click="triggerClick" type="primary" size="medium">
            <slot>
                确 定
            </slot>
        </el-button>
        <el-button v-else type="primary" :loading="true" size="medium"><slot name="ing">提交中</slot></el-button>
    </span>
</template>
      
<script>
    export default {
        name: 'StateButton',
        props:{
            is_load:{
                type:Boolean,
                default:true,
            },

        },

        data () {
            return {
                loading: false
            }
        },
        methods:{
            triggerClick(){
                this.loading = this.is_load;
                this.$emit('click');
            },
            setLoaded(){
                this.loading = false;
            },
            setLoading(){
                this.loading = true;
            }
        },
        watch:{
            state:function(val, OldVal){
                this.loading = val;
            },
            buttonState:function(val, OldVal){
                this.loading = val;
            }
        },
        created(){
            this.$on('reset', this.setLoaded);
            this.$on('ing',   this.setLoading);
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
      